<div
  fxLayout="row"
  fxLayout.lt-sm="column-reverse"
  [class.full-height]="isLarge"
>
  <nz-sider
    [nzCollapsible]="isLarge"
    [(nzCollapsed)]="ms.designListCollapsed"
    nzCollapsedWidth="50"
    [nzTheme]="ms.sideTheme"
  >
    <!-- nzBreakpoint="xl" -->
    <ul
      nz-menu
      [nzTheme]="ms.sideTheme"
      nzMode="inline"
      [nzInlineCollapsed]="ms.designListCollapsed"
    >
      <li
        nz-menu-item
        nzMatchRouter
        *ngFor="
          let challenge of ms.game.challengeManager.challenges;
          trackBy: getId
        "
      >
        <a [routerLink]="challenge.id">
          <strong [class.text-danger]="!challenge.unlocked">{{
            challenge.name
          }}</strong>
        </a>
      </li>
    </ul>
  </nz-sider>
  <div class="inner-content"><router-outlet></router-outlet></div>
</div>
